<template>
  <div class="natural">
    <div class="natural-data">
      <!-- 输入任意文本 -->
      <div class="tips-tips" v-if="$route.params.type === 'natural'">请确认自购已满五万，方可申请店主</div>
      <van-field
        v-model="boss_name"
        label="店主名称"
        placeholder="请与法人姓名一致"
        :rules="[{ required: true, message: '请填写' }]"
        required
      />
      <van-field
        v-model="boss_phonenum"
        type="tel"
        label="手机号"
        :rules="[{ pattern, message: '请填写正确的电话号' }]"
        required
        placeholder="手机号"
      />
      <van-field
        v-model="address"
        readonly
        clickable
        name="area"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
        :rules="[{ required: true, message: '请填写' }]"
        required
      />
      <van-field
        v-model="areaDetail"
        label="详细地址"
        placeholder="请与身份证地址一致"
        :rules="[{ required: true, message: '请填写' }]"
        required
      />
      <van-field
        v-model="boss_idnum"
        label="身份证号"
        placeholder="身份证号"
        :rules="[{ required: true, message: '请填写' }]"
        required
      />
    </div>
    <div class="idcard">
      <div>身份证上传</div>
      <div class="idcardpic">

        

        <div class="positive">
          <span>正面(人像)</span>
          <van-field name="uploader" error-message-align="center" :rules="[{ required: true, message: '请上传' }]" required>
            <template #input>
              <van-uploader
                class="boss_idcard"
                v-model="boss_idcard1"
                result-type="dataUrl"
                :max-count="1"
                :before-read="beforeRead"
              />
            </template>
          </van-field>
        </div>
        <div class="otherside">
          <span>反面(国徽)</span>
          <van-field name="uploader" error-message-align="center" :rules="[{ required: true, message: '请上传' }]">
            <template #input>
              <van-uploader
                class="boss_idcard"
                v-model="boss_idcard2"
                result-type="dataUrl"
                :max-count="1"
                :before-read="beforeRead"
              />
            </template>
          </van-field>
        </div>
        <!-- <div class="otherside">
          <span>手持身份证照片</span>
          <van-field name="uploader" error-message-align="center" :rules="[{ required: true, message: '请上传' }]">
            <template #input>
              <van-uploader
                class="boss_idcard"
                v-model="boss_idcard3"
                result-type="dataUrl"
                :max-count="1"
                :before-read="beforeRead"
              />
            </template>
          </van-field>
        </div> -->
      </div>
      <div class="tips-tips">
          1.上传法人身份证(与营业执照保持一致)<br/>
          2.在有效期内;图片清晰、无遮挡、无反光<br/>
          3.图片大小为2M以内;图片为横版<br/>
        </div>
      <div class="tips-tips" v-if="isapp">
        小提示：如果多次上传失败，请使用微信公众号搜索“嗨逛全球”进行上传
      </div>
    </div>
    <van-popup v-model:show="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="
          (value) => {
            showArea = false;
            address = value
              .filter((item) => !!item)
              .map((item) => item.name)
              .join('/');
          }
        "
        @cancel="showArea = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import compressor from "@/lib/compressor";
import { Toast } from "vant";
import { areaList } from "@/types/areaList";
export default {
  props: {
    natural_data: {
      type: Object,
    },
  },
  setup(props) {
    const data = reactive({
      showArea: false,
      isapp: false,
    });

    const beforeRead = async (file) => {
      try {
        // let filesize = (file.size / 1024 / 1024).toFixed(1);
        // let res=file;
        // while(filesize>0.5){
        //   res= await compressor(res);
        //   filesize=(res.size / 1024 / 1024).toFixed(1);
        //   console.log(filesize+":"+res.size);
        // }
        // console.log("最终大小"+filesize+":"+res.size);

        const res = await compressor(file);
        return res;
      } catch (err) {
        Toast("上传失败！请重试");
      }
    };
    if (navigator.userAgent.indexOf("haiguang_mobile") > -1) {
      data.isapp = true;
    }
    const pattern = /^1[3456789]\d{9}$/;
    return {
      ...toRefs(props.natural_data),
      ...toRefs(data),
      pattern,
      areaList,
      beforeRead,
    };
  },
};
</script>
<style lang="scss" scoped>
.natural {
  margin: 1.2rem;
  font-size: 1.3rem;
  .natural-data {
    border-radius: 1rem;
    overflow: hidden;
  }
  .idcard {
    border-radius: 1rem;
    overflow: hidden;
    margin: 1.2rem 0;
    background: #fff;
    padding: 1rem 0;
    .idcardpic {
      display: flex;
      width: calc(100vw - 2.4rem);
      justify-content: space-evenly;
      overflow: auto;
      padding: 1rem 0;
      & > div {
        display: flex;
        flex: 1;
        flex-direction: column-reverse;
        span {
          color: #aaa;
          font-size: 1.3rem;
        }
      }
    }
    
  }
  .tips-tips {
      color: red;
      padding: 0 2rem;
      text-align: left;
    }
}
.boss_idcard {
  margin: auto;
}
</style>
